{% extends 'base.html' %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block title %}Transparency through volunteering{% endblock %}

{% block content %}

<div class="span-5">

<h2>Sign up to help make this the most accountable general election ever!
</h2>
<script type="text/javascript">
window.onload = function () { document.getElementById('id_first_name').focus(); }
</script>
<p>
<em><a href="/aboutus/">Democracy Club</a></em> is a new, independent network of volunteers who want to help internet-savvy transparency groups like <a href="http://www.mysociety.org/">mySociety</a> and <a href="http://www.thestraightchoice.org/">The Straight Choice</a> to hold election candidates and representatives to account. Both of these organisations endorse this project. If you sign up, we will (in time) suggest ways you might want to help them.
</p>
{% if form %}
  <form action="" method="post" id="signup">
  <table>
  {{ form.as_table }}
  <tr>
   <td></td>
   <td><input type="submit" value="sign up" /></td>
  </tr>
  </table>
  </form>
 {% endif %}
<p>
When you sign up, representatives of these organisations will occasionally suggest tasks by email, <a href="/aboutus/#what">such as</a> gathering information on general election candidates or finding and sharing election leaflets, to help them build awesome sites that will make the next election the most transparent ever. They'll also help you to collaborate with other volunteers in your area.
</p>
<!--<p>
We already know that mySociety wants to gather information on general election candidates, and TheStraightChoice wants you to help them find and share election leaflets. As the election approaches there'll be even more things to do, and you can be part of it.
</p>-->

<p class="small">We will occasionally suggest tasks on behalf of other transparency related groups, but we'll never share your private details with anyone, and we'll never send you more than two emails a week, no matter what.  Read our <a href="/aboutus/#privacy">terms and conditions</a> for more.</p>

</div>

<div class="span-3 last">
<div id="visualization"></div>
<p>We're trying to get volunteers in every part of the UK.  So far, we've recruited {{ volunteers }} volunteers in {{ count }} constituencies (out of a total {{ total }}).  <a href="/statistics/">Read more about how we're doing.</a></p>
<p class="quiet">Right now we're signing people up to the current constituencies; things will automatically work with new constituencies as and when they're available.</p>

{% endblock %}

{% block js %}
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='3802548282',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script><script>utmx("url",'A/B');</script>
<!-- End of Google Website Optimizer Control Script -->


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, '% complete');
  data.setValue(0, 1, {{percent_complete}});

  // Create and draw the visualization.
  var chart = new google.visualization.Gauge(document.getElementById('visualization'));
  var opts = {redFrom: 90, 
              redTo: 100, 
              yellowFrom: 75,
              yellowTo: 90, 
              greenFrom: 35, 
              greenTo: 75};

   chart.draw(data, opts);
}
google.setOnLoadCallback(drawVisualization);
</script>
{% endblock %}

{% block endpage %}
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
if(typeof(_gat)!='object')document.write('<sc'+'ript src="http'+
(document.location.protocol=='https:'?'s://ssl':'://www')+
'.google-analytics.com/ga.js"></sc'+'ript>')</script>
<script type="text/javascript">
try {
var gwoTracker=_gat._getTracker("UA-4976987-2");
gwoTracker._trackPageview("/3802548282/test");
}catch(err){}</script>
<!-- End of Google Website Optimizer Tracking Script -->
{% endblock %}
